<template>
  <div class="page" style="">
    <div class="print_title">采购申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseBill }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposer_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >费用所属团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamId_dictText?formData.teamId_dictText:formData.teamId }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >期望到货时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ moment(formData.expectUseTime).format('YYYY-MM-DD HH:mm') }}</p>
          </a-col>
        </a-row>
      </a-col>
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否紧急:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isUrgency_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >定点供应商:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isSupplier_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >物料类别:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.provisionBroad_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >采购大类:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.provisionBroadType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >采购总预算(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseBudgetAmount?(formData.purchaseBudgetAmount).toFixed(2):'' }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="!(formData.provisionBroadType && formData.provisionBroadType =='administration')">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所属业务板块:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.businessSegment_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="!(formData.provisionBroadType && formData.provisionBroadType =='administration')">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >紧急采购:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.urgentStatus_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >采购事由:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.purchaseReason }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row type="flex" justify="center">
      <a-col>
        <p class="title_table">物料明细</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>
    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>

    <!-- <p class="title" style="margin-top: 18px;">附件信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px 18px 9px;">
      <a-col v-for="(item, index) in purchaseFile" :key="index">
        <p style="margin-bottom: 0">{{ item }}</p>
      </a-col>
    </a-row> -->

    <!-- <p class="title" v-if="formData.bpmStatus !== '1'">处理信息</p>
    <a-row type="flex" justify="center" v-if="formData.bpmStatus !== '1'">
      <a-col>
        <p class="title_table">流程历史跟踪</p>
      </a-col>
      <a-col :span="24" style="padding-bottom: 18px;">
        <a-table
          :columns="columnsHistory"
          :data-source="dataHistorySource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row> -->
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import moment from 'moment';
export default {
	props: {
		formData: {
			type: Object,
			default: () => {},
			required: true
    },
		formDataHistory: {
			type: Object,
			default: () => {},
			required: true
    }
	},
  components: {
    FileInfor,
    ProcessInfor
  },
  data() {
    return {
      dataSource: [], // 物料列表
      moment, // 时间
      columns: [
				{
					title: '序号',
					dataIndex: '',
					key: 'rowIndex',
					width: 45,
					align: 'center',
					customRender: function (t, r, index) {
						return parseInt(index) + 1;
					}
				},
				{
					title: '采购小类',
					align: 'center',
					width: 65,
					dataIndex: 'provisionSmall_dictText'
				},
				{
					title: '关联项目',
					align: 'center',
					width: 65,
					dataIndex: 'projectId_dictText'
				},
				{
					title: '物料名称',
					align: 'center',
					width: 65,
					dataIndex: 'materialName_dictText'
				},
				{
					title: '物料编号',
					align: 'center',
					width: 65,
					dataIndex: 'materialBillId'
				},
				{
					title: '品牌',
					align: 'center',
					width: 65,
					dataIndex: 'brand'
				},
				{
					title: '规格型号',
					align: 'center',
					width: 65,
					dataIndex: 'specification'
				},
				{
					title: '数量',
					align: 'center',
					width: 45,
					dataIndex: 'amount'
				},
				{
					title: '单位',
					align: 'center',
					width: 45,
					dataIndex: 'unit_dictText'
				},
				// {
				// 	title: '参考价格(元)',
				// 	align: 'center',
				// 	width: 65,
				// 	dataIndex: 'referencePrice'
				// },
				{
					title: '预算单价(元)',
					width: 65,
					align: 'center',
					dataIndex: 'budgetAmount'
				},
        {
					title: '小计金额(元)',
					width: 65,
					align: 'center',
					dataIndex: 'allAmount'
				}
			],
			dataHistorySource: [], // 流程列表
			columnsHistory: [
				{
					title: '序号',
					rowKey: (record, index) => index,
					width: 45,
					align: 'center',
					customRender(t, r, index) {
						return parseInt(index) + 1
					}
				},
				{
					title: '名称',
					align: 'center',
					width: 65,
					dataIndex: 'name'
				}, {
					title: '流程实例ID',
					align: 'center',
					width: 80,
					dataIndex: 'processInstanceId'
				}, {
					title: '开始时间',
					align: 'center',
					width: 130,
					dataIndex: 'startTime'
				}, {
					title: '结束时间',
					align: 'center',
					width: 130,
					dataIndex: 'endTime'
				}, {
					title: '负责人',
					align: 'center',
					width: 55,
					dataIndex: 'assigneeName'
				}, {
					title: '处理结果',
					width: 65,
					align: 'center',
					dataIndex: 'deleteReason'
				}, {
					title: '处理意见',
					align: 'center',
					dataIndex: 'remarks'
				}
			],
			url: {
				list: '/api/erp/purchase/procurement/erpPurchaseApplyFormDetail/allList', // 物料明细列表
				historyList: '/api/erpmng/act/task/processHistoryList' // 流程历史跟踪接口
			},
			purchaseFile: [] // 附件
    };
  },
	watch: {
		formData: {
			handler (val) {
				if (val) {
					this.list()
					this.getHistoryList()
					if (val.purchaseFile) {
						this.purchaseFile = val.purchaseFile.split(',')
					}
				}
			},
			immediate: true
		},
		formDataHistory: {
			handler (val) {
				if (val) {
					this.getHistoryList()
				}
			},
			immediate: true
		}
	},
	methods: {
		// 获取列表
		getHistoryList() {
			var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
			getAction(this.url.historyList, params).then(res => {
				if (res.success) {
					this.dataHistorySource = res.result.records || res.result
				}
			})
		},

		list () {
			if (!this.formData.id) {
				return false
			}
			var params = {
				billId: this.formData.id
			}
			getAction(this.url.list, params).then(res => {
				if (res.success) {
						this.dataSource = res.result.records || res.result
						this.dataSource.forEach((item, index) => {
						item.key = index
					})
				}
      })
		},

		tableRowClass(record, index) {
			console.log('record, index', record, index)
			if (index == 0) {
				return 'rowClass';
			}
      return ''
    }
	}
};
</script>
<style lang="less" scoped>
.page{
	background: #ffffff;
	padding: 19px 28px 0 28px;
	width: 750px;
	.print_title{
		font-size: 15px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 9px;
	}
	.title {
		background: #EEEEEE;
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		padding: 11px 9px;
	}
	.title_table{
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
	}
}
/deep/ .rowClass{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-thead th{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-thead tr{
	background: #EEEEEE;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
    margin: 0 0px;
}
/deep/ .ant-table-body tr {
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
.content{
  font-size: 13px;
}
</style>
